<!--通话评分弹窗-->
<template>
  <!--<div>-->
    <div class="call-grade" :class="callDialogShow ? 'layout-qua' : 'layin-qua'">
      <div v-if="!loading">
        <div class="call-grade-left">
          <h2>{{$t('intelligentQualityCheck.intelCallDetail')}}</h2>
          <div class="call-grade-left-con">
            <affix :label="$t('webchat.basicInfo')" class="call-detail">
              <detail-table :callData="currentItemCall" :audioId="flagId" :isCallGrade="true" :pauseAudio="pauseAudio"></detail-table>
            </affix>
            <affix :label="$t('business.businessInfo')">
              <div  class="business">
                <div v-if="businessShow.length ===0" >{{$t('qualityCheck.noBusinessInfo')}}</div>
                <div class="history-content" v-for="(item, index) in businessShow" :key="index">
                  <div class="data">
                    <div style="float: left;">{{item.createUser}}<span class="pad-left">{{$t('business.createBusiness')}}</span></div>
                    <div style="float: right;"><span class="pad-right">{{$t('public.callStatus')}}</span>{{item.step}}</div>
                  </div>
                  <div class="clear"></div>
                  <div v-for="(one, index) in item.data" :key="index" class="bus-info div-color">
                    <div v-if="one.name === $t('business.businessNumber')">
                      <span>{{one.name + $t('public.colon')}}</span><span>{{one.value}}</span>
                      <span @click="busShowDetail(item._id)" style="float: right;" class="span-color"><i class="icon iconfont font12 pad-right" :class="busDetailShow? 'icon-shouqi':'icon-zhankai1'"></i>{{busDetailShow?$t('qualityCheck.businessUp'):$t('qualityCheck.businessDown')}}</span>
                    </div>
                    <div v-else>
                      <span>{{one.name + $t('public.colon')}}</span>
                      <span class="break-all" v-if="typeof one.value === 'object'">
              <div v-for="(item1, index) in one.value" :key="index">
                <globalPopup :url="item1.url" :key="item1.url2"
                             @showBigImage="showBigImage"
                             :name="item1.name" :currObj="item1" :srcUrl="item1.url2" :imgObj="item.data"></globalPopup>
              </div>
        </span>
                      <span class="break-all" v-else v-html="one.value"></span>
                    </div>
                  </div>
                  <business class="business-dialog bus-info" :busId="busId" :showHistory="true" v-if="busDetailShow"  @event="businessEvent"></business>
                </div>
              </div>
            </affix>
          </div>
        </div>
        <div class="call-grade-right">
              <h2>{{$t('qualityCheck.grade2')}}
                <div v-show="callDialogShow" class="close" @click="closeWindow"><i class="el-icon-close"></i></div>
              </h2>
              <div class="call-grade-right-con">
                <!--监控类型-->
                <grade-temp ref="scoreTem" :configList="configList" :configListFormDeepClone="configListFormDeepClone" :form="configListForm" :simpleForm="simpleForm" :gradeObj="gradeObj" @save="saveGrade" v-if="this.template.type!=='pass'">
                </grade-temp>
                <pass-temp v-if="this.template.type==='pass'" ref="passTem" :configList="configList" :form="configListForm" :gradeObj="GRADE_AMOUNT" @save="saveGradePass" :disabled="disabled"></pass-temp>
                <div style="width:100%;border-bottom:1px solid #ccc;margin: 20px 0"></div>
                <el-form label-position="left" label-width="100px" style="margin-bottom:14px;">
                  <el-form-item :label="$t('qualityCheck.monnityType') + ' ：'">
                    <el-select style="width:100%;" size="mini" v-model="monitorType" :placeholder="$t('public.pleasePick')" :disabled="disabled">
                      <el-option checked value="">{{$t('public.pleasePick')}}</el-option>
                      <el-option
                        v-for="(item, index) in monitorTypeList"
                        :label="item.name"
                        :key="index"
                        :value="item._id">
                      </el-option>
                    </el-select>
                    <el-checkbox v-if="this.currentItemCall.QC_SUBMIT" v-model="isAddPerformanceChecked" :disabled="disabled">{{$t('qualityCheck.performanceVideo')}}</el-checkbox>
                  </el-form-item>
                  <!-- 服务品质 -->
                  <el-form-item :label="$t('call.SQLabel') + '：'">
                    <span v-if="getSQLabel.length <= 0" style="font-size: 12px;">{{$t('call.noSQLabel')}}</span>
                    <div v-else>
                      <ul>
                         <li class="follow-agent follow-common" v-for="item in SQ_LABELLabel" :key="item._id">{{item.name}}
                          <i class="el-icon-close" @click.stop="closeSqLabel(item._id)"></i>
                        </li>
                      </ul>
                      <el-popover
                              ref="popover1"
                              placement="bottom"
                              width="230"
                              trigger="click">
                          <ul class="SQLabel">
                              <el-input size="mini"
                                v-model.trim="filter"
                                >
                                  <i
                                    class="el-input__icon el-icon-search"
                                    slot="suffix"
                                    @click="filterNode">
                                  </i>
                              </el-input>
                              <li v-for="(item, index) in SQlabelList" :key="index">
                                  <el-checkbox v-model="item.isCheck" @change="(val) => labelChange(val,item)">{{item.name}}</el-checkbox>
                                  <span style="margin-left: 8px;color: #459AE9" v-if="item.isCheck">({{$t('public.already')}})</span>
                              </li>
                          </ul>
                      </el-popover>
                      <div class="follow-agent-wrap" v-popover:popover1  style="width:100%" placeholder="请选择">
                        <div>
                          <span type="primary" class="follow-agent-wrap-btn"><i class="el-icon-arrow-down" style="color: #c0c4cc"></i></span>
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item :label="$t('qualityCheck.qualityCheckRate')">
                    <el-input
                      style="width:100%;"
                      type="textarea"
                      :rows="3"
                      :placeholder="$t('public.pleaseEnter')"
                      v-model="COMMENT" :disabled="disabled">
                    </el-input>
                  </el-form-item>
                </el-form>
                <!--<div>-->
                  <!--<i style="color: red;" v-if="changeMonitorType === 'enable'">*</i>&nbsp;-->
                  <!--<span>{{$t('qualityCheck.monnityType')}} :</span>-->
                  <!--<el-select style="margin-left: 20px;" size="mini" v-model="monitorType" :placeholder="$t('public.pleasePick')" :disabled="disabled">-->
                    <!--<el-option checked value="">{{$t('public.pleasePick')}}</el-option>-->
                    <!--<el-option-->
                      <!--v-for="item in monitorTypeList"-->
                      <!--:label="item.name"-->
                      <!--:value="item._id">-->
                    <!--</el-option>-->
                  <!--</el-select>-->
                  <!--<el-checkbox style="margin-left: 20px;" v-if="this.currentItemCall.QC_SUBMIT" v-model="isAddPerformanceChecked" :disabled="disabled">{{$t('qualityCheck.performanceVideo')}}</el-checkbox>-->
                <!--</div>-->
                <!--<div class="clearfix sq-wrap">-->
                  <!--<span class="fl pad" >{{$t('call.SQLabel')}}:</span>-->
                  <!--<span v-if="getSQLabel.length <= 0" class="fl">&nbsp;&nbsp;&nbsp;{{$t('call.noSQLabel')}}</span>-->
                  <!--<el-select v-else size="mini" class= 'label-select fl' v-model="SQ_LABEL" :placeholder="$t('public.pleasePick')" :disabled="disabled">-->
                    <!--<el-option checked value="">{{$t('public.pleasePick')}}</el-option>-->
                    <!--<el-option-->
                      <!--v-for="item in getSQLabel"-->
                      <!--:label="item.name"-->
                      <!--:value="item._id"-->
                    <!--&gt;-->
                    <!--</el-option>-->
                  <!--</el-select>-->
                <!--</div>-->
                <single-label class="single-label-grade" v-if="labelType === 'single' && isCallLabel" :callLabel="getCallLabel" :disabled="disabled" :checkLabels="currentItemCall.LABELS || []" :callSheetId="currentItemCall.CALL_SHEET_ID" :flag="flagQC" :refreshCallLabel="refreshCallGrade"></single-label>
                <multi-label v-if="labelType === 'multi' && isCallLabel" :callLabel="getCallLabel" :disabled="disabled" :checkLabels="currentItemCall.LABELS || []" :callSheetId="currentItemCall.CALL_SHEET_ID" :flag="flagQC" :refreshCallLabel="refreshCallGrade" :showAdd="true"></multi-label>
                <div style="margin:40px 0;text-align:center;">
                  <el-button size="mini" @click="off">{{$t('public.cancel')}}</el-button>
                  <el-button size="mini" @click.stop="nextGrade" v-if="passBtn">{{$t('qualityCheck.passNext')}}</el-button>
                  <el-button size="mini" type="primary" @click="save" v-if="!disabled">{{saveBtnDescribe}}</el-button>
                </div>
              </div>
              </div>
      </div>
      <!--<div v-loading="loading"></div>-->
      <!--<div v-show="callDialogShow" class="close" @click="closeWindow"><i class="el-icon-close"></i></div>-->
      <!-- <div v-show="callDialogShow" class="mask-qua"></div> -->
    </div>
  <!--</div>-->
</template>
<script>
  import {checkform} from '@/utils/validate'
  import { commitImg } from '@/utils/publicMethod.js'
  import {getQualityCheckConfigs} from '@/utils/webchat.js'
  import {deepClone, getCache, getAllUseSingleCallLabel, getAllUseMultiCallLabel} from '@/utils/m7Utils.js'
  import {getBusinessHistoryDataNew, showCountDown} from '@/utils/workflowUtils.js'
  import business from '@/components/public-modules/cust-tab-content/business/index.vue'
  import globalPopup from '@/components/ui-modules/affix/globalPopup.vue'
  import gradeTemp from '../base/gradeTemp'
  import passTemp from '../base/passTemp.vue'
  import affix from '../../../ui-modules/affix/Affix.vue'
  import singleLabel from '@/components/business-modules/call/SingleLabel.vue'
  import MultiLabel from '@/components/business-modules/call/MultiLabel.vue'
  import AudioCommon from '@/components/public-modules/audio'
  import DetailTable from '@/components/public-modules/cust-tab-content/call-detail/DetailTable.vue'
  export default {
    name: 'callGrade',
    data () {
      return {
        pauseAudio: 'open',
        busId: '',
        loading: true,
        busDetailShow: false,
        gradeObj: {
          grade: 0,
          COMMENT: '',
          obj: {},
          type: ''
        },
        GRADE_AMOUNT: {
          amount: '',
          COMMENT: ''
        },
        COMMENT: '',
        configList: [],
        configListForm: {},
        configListFormDeepClone: {},
        simpleForm: {},
        flagQC: 'QC',
        isCallLabel: true,
        SQ_LABEL: [],
        monitorType: '',
        isAddPerformanceChecked: true,   //    是否 算入绩效考核  座席提交时 加的
        refreshAudio: 0,
        dataType: ['pdf', 'PDF', 'txt', 'TXT'],
        changeMonitorType: 'enable',
        SQ_LABELLabel:[],
        SQlabelList:[],
        filter:''
      }
    },
    components: {
      globalPopup,
      business,
      gradeTemp,
      passTemp,
      singleLabel,
      MultiLabel,
      affix,
      AudioCommon,
      DetailTable
    },
    computed: {
      saveBtnDescribe () {
        return this.reGrade ? this.$t('public.save') : this.$t('qualityCheck.saveAndNext')
      },
      passBtn () {
        return !this.reGrade
      },
      getSQLabel () {
        let sqLabels = this.$getCache('sqLabels')
        this.SQlabelList = sqLabels
        return sqLabels || []
      },
      businessShow () {
        let data = this.currentItemCall.busHistory || []
        let arr = []
        for (let i = 0; i < data.length; i++) {
          let busObj = {_id: data[i]._id}
          let item = data[i]
          busObj.lastUpdateUser = getCache('agents', item.lastUpdateUser).displayName
          busObj.createUser = getCache('agents', item.createUser).displayName
          busObj.step = getCache('businessFlowStep', item.step).name
          busObj.flow = getCache('businessFlow', item.flow).name
          busObj.data = getBusinessHistoryDataNew({excuteData: item.historyData, action: 'create'}, item)
          arr.push(busObj)
        }
        return arr
      },
      getCallLabel () {
        this.$nextTick(() => { // 第一次进来加载不到录音的dom
          this.refreshAudio = Math.random()
        })
        let allLabel = deepClone(this.$getCache('callLabel'))
        if (allLabel === -1) {
          this.isCallLabel = false
          allLabel = []
        }
        let labelType = this.$store.state.call.transCache.callLabelType
        let multiObj = this.$store.state.call.transCache.multiLabel
        let singleObj = this.$store.state.call.transCache.singleLabel
        if (multiObj && labelType === 'multi') { // 能取多标签并且状态是多级
          return multiObj
        } else if (singleObj.singleLabel && labelType === 'single') { // 能取单标签并且状态是单级
          return singleObj.singleLabel
        } else { // 取不到标签，重新往call里面存单标签和多标签
          let singleObj = getAllUseSingleCallLabel(allLabel)
          this.$store.commit('call/SET_CALL_SINGLE_LABEL', singleObj)
          let multiObj = getAllUseMultiCallLabel(allLabel)
          this.$store.commit('call/SET_CALL_MULTI_LABEL', multiObj)
          if (labelType === 'single') {
            return singleObj.singleLabel
          } else if (labelType === 'multi') {
            return multiObj
          }
        }
      },
      //    监控类型
      monitorTypeList () {
        let monitorTypeList = this.$getCache('qualityMonitorCheck')
        return monitorTypeList || []
      }
    },
    props: {
      currentItemCall: Object,
      template: Object,
      currentGrade: Object,
      refreshCallGrade: {type: Number, default: 0},
      reGrade: {type: Boolean, default: false},
      disabled: {type: Boolean, default: false},
      callDialogShow: {type: Boolean, default: false},
      flagId: {type: String, default: ''}
    },
    methods: {
      showBigImage (item, obj) {
        commitImg(item, obj)
      },
      checkImg (value) {
        if (checkform(value, 'Img')) {
          return false
        } else {
          return true
        }
      },
      businessEvent (eventData) {
        let data = eventData.data
        this.busId = data._id
        if (eventData.event !== 'changeBusinessMaster') {
          this.$store.dispatch('getBusinessDetailById', {_id: this.busId})
        }
      },
      busShowDetail (id) {
        this.busDetailShow = !this.busDetailShow
        if (this.busDetailShow) {
          this.$store.dispatch('getBusinessDetailById', {_id: id}).then(() => {
            this.busId = id
          })
        }
      },
      fetchData () {
        for(let key in this.template.config){
          this.template.config[key].value= this.currentItemCall[Number(key)+1]
        }
        this.currentItemCall.CALL_TIME_LENGTH_show = showCountDown(this.currentItemCall.CALL_TIME_LENGTH * 1000)
        if (this.currentItemCall.RING_TIME_LENGTH && this.currentItemCall.RING_TIME_LENGTH !== '00:00:00') {
          this.currentItemCall.RING_TIME_LENGTH_show = showCountDown(this.currentItemCall.RING_TIME_LENGTH * 1000)
        } else {
          this.currentItemCall.RING_TIME_LENGTH_show = '00:00:00'
        }
        // this.currentItemCall.RING_TIME_LENGTH = showCountDown(this.currentItemCall.RING_TIME_LENGTH * 1000)
        if (this.template.type !== 'pass') {
          this.gradeObj = {
            grade: 100,
            COMMENT: '',
            obj: {},
            type: ''
          }
          this.COMMENT = ''
          let configs = deepClone(this.template.config)
          let list = getQualityCheckConfigs(configs)
          if (this.reGrade) {
            this.gradeObj.type = 'grade'
            this.gradeObj.grade = this.currentGrade.GRADE_AMOUNT
            this.COMMENT = this.currentGrade.COMMENTS
            this.SQ_LABEL = this.currentGrade.SQ_LABEL
            this.isAddPerformanceChecked = this.currentGrade.RECORDING_PERFORMANCE
            this.monitorType = this.currentGrade.monitorType
          }
          this.configListForm = {}
          this.configListFormDeepClone = {}
          this.simpleForm = {}
          list.forEach((item) => {
            item.value = ''
            if (this.reGrade) {
              let value = Math.round(this.currentGrade[item.order] * 100 / item.weight)
              this.$set(this.configListForm, item.order + '_' + item.fatal + '_' + item.weight, value)
              this.$set(this.simpleForm, item.order + '_' + item.fatal + '_' + item.weight, this.currentGrade[item.order])
            } else {
              this.$set(this.configListForm, item.order + '_' + item.fatal + '_' + item.weight, 100)
              this.$set(this.simpleForm, item.order + '_' + item.fatal + '_' + item.weight, item.weight)
            }
          })
          this.configList = deepClone(list)
          this.configListFormDeepClone = deepClone(this.configListForm)
        } else {
          this.GRADE_AMOUNT = {
            amount: '',
            COMMENT: ''
          }
          this.COMMENT = ''
          this.configList = deepClone(this.template.config)
          this.configListForm = {}
          let self = this
          if (this.reGrade) {
            this.GRADE_AMOUNT.type = 'grade'
            this.COMMENT = this.currentGrade.COMMENTS
            this.GRADE_AMOUNT.amount = this.currentGrade.GRADE_AMOUNT.amount
            this.SQ_LABEL = this.currentGrade.SQ_LABEL
            this.monitorType = this.currentGrade.monitorType
            this.isAddPerformanceChecked = this.currentGrade.RECORDING_PERFORMANCE
          }
          let renderForm = function (config) {
            config.forEach(item => {
              if (self.reGrade) {
                if(!self.currentGrade[item.name]) {
                  self.$set(self.configListForm, item.name, 'dont')
                } else {
                  self.$set(self.configListForm, item.name, self.currentGrade[item.name])
                }
              } else {
                self.$set(self.configListForm, item.name, 'dont')
              }
              if (item.child && item.child.length > 0) {
                renderForm(item.child)
              }
            })
          }
          renderForm(this.configList)
          console.log(this.configList,this.configListForm,'configList')
        }
      },
      off () {
        this.$emit('off')
        this.pauseAudio = 'close'
      },
      nextGrade () {
        this.pauseAudio = 'close'
        this.$emit('nextGrade')
      },
      saveGrade (gradeObj) {
        gradeObj.COMMENT = this.COMMENT
        if (this.monitorTypeList.length > 0) {
          if (this.monitorType === '' && this.changeMonitorType === 'enable') {
            this.$message.error(this.$t('qualityCheck.chooseMonityType'))
            return
          }
        }
        let play = document.getElementById('quality-autoplay_' + this.flagId + '_old')
        if (play) {
          play.pause()
        }
        this.pauseAudio = 'close'
        let SQlabel = this.SQ_LABEL
        let monitorType = this.monitorType
        let submitTime = ''
        if (this.currentItemCall.submitTime) {
          submitTime = this.currentItemCall.submitTime
        }
        let RECORDING_PERFORMANCE = this.isAddPerformanceChecked
        this.$emit('saveGrade', gradeObj, SQlabel, monitorType, submitTime, RECORDING_PERFORMANCE, this.currentItemCall.QC_SUBMIT)
        this.SQ_LABEL = [] // 外抛之后清空处理，防止把数据带到下一个模板里面
        this.SQlabelList.forEach((v) => {
          v.isCheck = false
        })
        this.monitorType = '' // 外抛之后清空处理，防止把数据带到下一个模板里面
        this.isAddPerformanceChecked = true   //   绩效录音 复选框 默认为  TRUE
      },
      saveGradePass (gradeObj) {
        gradeObj.COMMENT = this.COMMENT
        if (this.monitorTypeList.length > 0) {
          if (this.monitorType === '' && this.changeMonitorType === 'enable') {
            this.$message.error(this.$t('qualityCheck.chooseMonityType'))
            return
          }
        }
        let play = document.getElementById('quality-autoplay_' + this.flagId + '_old')
        if (play) {
          play.pause()
        }
        this.pauseAudio = 'close'
        let obj = {
          config: this.configListForm,
          grade: gradeObj
        }
        let SQlabel = this.SQ_LABEL
        let monitorType = this.monitorType
        let submitTime = ''
        if (this.currentItemCall.submitTime) {
          submitTime = this.currentItemCall.submitTime
        }
        let RECORDING_PERFORMANCE = this.isAddPerformanceChecked
        this.$emit('saveGrade', obj, SQlabel, monitorType, submitTime, RECORDING_PERFORMANCE, this.currentItemCall.QC_SUBMIT)
        this.SQ_LABEL = [] // 外抛之后清空处理，防止把数据带到下一个模板里面
        this.SQlabelList.forEach((v) => {
          v.isCheck = false
        })
        this.monitorType = '' // 外抛之后清空处理，防止把数据带到下一个模板里面
        this.isAddPerformanceChecked = true    //   绩效录音 复选框 默认为  TRUE
      },
      changeAudioSpeed (item) {
        let local = window.localStorage
        local.setItem('audioSpeed', item)
        let myAudio = document.getElementById('quality-autoplay_' + this.flagId + '_old')
        if (myAudio && myAudio.playbackRate) {
          myAudio.playbackRate = item
        }
      },
      closeWindow () {
        this.$emit('close')
        this.busDetailShow = false
        this.pauseAudio = 'close'
      },
      save () {
        if (this.template.type === 'pass') {
          this.$refs.passTem.save()
        } else {
          this.$refs.scoreTem.save()
        }
      },
      labelChange(val,item){
        if(val){
          this.SQ_LABEL.push(item._id)
        }else{
          let index = this.SQ_LABEL.indexOf(item._id)
          this.SQ_LABEL.splice(index,1);
        }
      },
      closeSqLabel(id){
        let index = this.SQ_LABEL.indexOf(id)
        this.SQ_LABELLabel.splice(index,1)
        this.SQ_LABEL.splice(index,1)
      },
      filterNode () {
        this.SQlabelList = this.getSQLabel.filter((item) => {
          if (item.name.indexOf(this.filter) !== -1) {
            return true
          }
        })
      },
    },
    beforeMount () {
      let p1 = this.$store.dispatch('getCache', {type: 'businessFlowStep'})
      let p2 = this.$store.dispatch('getCache', {type: 'businessFlowField'})
      let p3 = this.$store.dispatch('getCache', {type: 'businessFlow'})
      let p4 = this.$store.dispatch('getCache', {type: 'sqLabels'})
      let p5 = this.$store.dispatch('getCache', {type: 'qualityMonitorCheck'})
      let self = this
      Promise.all([p1, p2, p3, p4, p5]).then(() => {
        self.loading = false
      })
      let labelType = this.$store.state.call.transCache.callLabelType
      this.labelType = labelType
      this.$store.dispatch('getDicCache', {'type': 'qualityCheckMonitorTypeStatus'}).then((res) => {
        if (res && res.success) {
          this.changeMonitorType = res.data
        }
      })
      this.fetchData()
    },
    watch: {
      refreshCallGrade () {
        this.refreshAudio = Math.random() // change audio组件的标志
        this.pauseAudio = 'open'
        this.SQ_LABEL = []
        this.SQlabelList.forEach((v) => {
          v.isCheck = false
        })
        this.monitorType = ''
        this.isAddPerformanceChecked = true    //   绩效录音 复选框 默认为  TRUE
        this.fetchData()
      },
      SQ_LABEL(){
        this.SQ_LABELLabel = []
        this.SQlabelList.forEach((v) => {
          v.isCheck = false
        })
        if(this.SQ_LABEL.length>0){
          this.SQ_LABEL.forEach(item=>{
            this.getSQLabel.forEach((v) => {
              if(item==v._id){
                v.isCheck = true
                this.SQ_LABELLabel.push({_id:v._id,name:v.name})
              }
            })
          })
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .layout-qua
    transition transform 0.35s
    box-shadow 0 3px 6px rgba(0, 0, 0, .3)
    animation movelayout-qua .4s
    @keyframes movelayout-qua
      0%
        width 0px
      100%
        width calc(84vw)
  .layin-qua
    width:0px
    transition transform 0.35s
  .call-grade.layin-qua .call-grade-right
    width 0px
  .call-grade.layout-qua .call-grade-right
    width 396px
  .call-grade.layin-qua .call-grade-left
    width 0px
  .call-grade.layout-qua .call-grade-left
    width calc(84vw - 396px)
  .call-grade
    position fixed
    right 0
    top 95px
    height calc(100% - 95px)
    z-index 6
    background-color #fff
    .bus-info
      .listen
        display: none
    .call-grade-left
      float left
      position relative
      z-index 5
      /*width calc(100% - 396px)*/
    .call-grade-right
      float right
      position relative
      z-index 5
      /*width 396px*/
      background-color #f2f2f2
    .call-grade-left h2,.call-grade-right h2
      padding 14px 20px
      font-size 16px
      font-weight bold
      border-bottom 1px solid #ccc
    .call-grade-right h2
      border-left 1px solid #ccc
    .call-grade-left .call-grade-left-con,.call-grade-right .call-grade-right-con
      height calc(100vh - 185px)
      overflow-y auto
      overflow-x hidden
      padding 20px
    .call-grade-right .call-grade-right-con
      border-left 1px solid #ccc
  .mask-qua
    position fixed
    right 0
    left 0
    top 0
    bottom 0
    z-index 2
    background-color #fff
    /*filter Alpha(Opacity=60)*/
    opacity 0
  .close
    position absolute
    right 28px
    top 14px
    z-index 5
    font-size 16px
    /*background-color #f2f2f2*/
    cursor pointer
</style>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl'
  .business
    border 1px solid #ddd
    background-color #f9f9f9
    padding 5px
    .data
      line-height 34px
      font-size 14px
      border-bottom 1px dotted #ddd
      height 34px
    .bus-info
      padding-top 4px
    .pad-right
      padding-right 6px
    .pad-left
      padding-left 6px
  .clearfix:after
    display block
  .sq-wrap
    margin-bottom 16px
.pad
  padding 8px 15px 0 0
.call-detail table
  bors(1px,#ddd)
  width 100%
  border-collapse collapse
  tr
    height 40px
    border-bottom 1px solid #e7e7eb
    td:nth-of-type(even)
      padding 10px
      color $cf-gray3
    td:nth-of-type(odd)
      padding 10px
      color $cf-gray0
  &:nth-of-type(even)
    color $cf-gray0
  tr:nth-of-type(even) td
    background #f4f5f9
  tr:hover td
    background $c-back
.call-detail table tr:nth-last-child(1)
  border-bottom none
.div-color
  color $cf-level1
.span-color
  color: $c-main;
  cursor: pointer
.SQLabel
  font-size 12px
  color #606266 !important
  line-height 34px
  cursor pointer
  white-space nowrap
  height 200px
  overflow auto
.follow-agent-wrap
    float left
    width 386px
    cursor pointer
    border-radius 5px
    border 1px solid #dcdfe6
    padding 8px 8px 6px 4px
    margin-top 6px
    margin-bottom 6px
    overflow hidden
    box-sizing border-box
    background #fff
  .follow-common
    float left
    position relative
    line-height 24px
    margin 5px 10px 5px 0px
    padding 0 10px
    border-radius 4px
    border 1px solid #ccc
    font-size 12px
  .follow-agent-add
    cursor pointer
  .el-icon-close
    font-size 12px
  .follow-agent
    &:hover
      .el-icon-close
        display block
    .el-icon-close
      display none
      position absolute
      right -10px
      top -10px
      width 24px
      height 24px
      font-size 12px
      line-height 24px
      transform scale(0.6)
      text-align center
      border-radius 50%
      background $c-pink
      color #fff
      cursor pointer
  .follow-agent-wrap-btn
    display block !important
    line-height 0px
    float right
    cursor pointer
    color $c-main
</style>














